<template>
  <!-- 标题 -->
  <van-nav-bar title="详情页" left-arrow @click-left="$router.push('/')" fixed placeholder />
  <!--  大图 -->
  <van-image :src="productObj.coverImage" class="tu1" />

  <!-- 详情 -->
  <van-cell-group>
    <van-cell :title="productObj.name" />
    <van-cell title="价格:" :value="productObj.price" />
    <van-cell title="商品介绍:" :label="productObj.desc" />
  </van-cell-group>

  <!-- 最多显示十行 -->
  <div id="talk">
    <ul>
      <h4>商品评论信息：</h4>
      <li v-for="(item, index) in commentArr" :key="item.id">
        <span>用户名：{{ item.user.nickName }}</span>
        <div class="van-ellipsis">评价:&emsp;{{ item.content }}</div>
      </li>
    </ul>
  </div>

  <!-- 发表评论 -->
  <van-cell-group inset class="pl">
    <van-field
      v-model="comment"
      rows="1"
      autosize
      label="评论"
      type="textarea"
      placeholder="请输入评论"
    />
    <van-button type="primary" size="small" @click="sendCommentFn">发布评论</van-button>
  </van-cell-group>

  <!-- 详情图片 -->
  <van-image v-html="productObj.content" class="tu1" />

  <!-- 底部加入购物车 -->
  <van-action-bar placeholder>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartArr.length" to="/cart" />
    <!-- @click="cartFn() -->
    <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
    <van-action-bar-button type="warning" text="加入购物车" @click="cartAdd()" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>
<script setup>
import { ref, nextTick } from "vue"
import { showConfirmDialog, showSuccessToast, showToast } from "vant"
import { useRoute } from "vue-router"
import router from "@/router"
import { loadCartList, cartArr } from "@/stores/cartlist"
import { detailRequest, talkRequest, commentRequest } from "@/api/prolist"
import { addlist } from "@/api/cartlist"
// 发起详情页请求、渲染
let route = useRoute()
console.log(route.query.id)
let itemid = ref("")
itemid.value = route.query.id
let productObj = ref({})
detailRequest(itemid.value).then((r) => {
  console.log(r.data.data)
  productObj.value = r.data.data
  // nextTick(() => {
  //   const box = document.getElementById('box')
  //   if (box) {
  //     const imgTags = box.querySelectorAll('img')
  //     imgTags.forEach((img) => {
  //       img.classList.add('img')
  //     })
  //   }
  // })
})
// 商品评论信息
let commentArr = ref()
function talkFn() {
  talkRequest(itemid.value).then((r) => {
    console.log(r.data)
    commentArr.value = r.data.data
    console.log(commentArr.value)
  })
}
talkFn()
// 发布评论信息
let comment = ref("")
function sendCommentFn() {
  let token = localStorage.getItem("user-token")
  let content = comment.value
  console.log(content)
  let coverImage = productObj.value.coverImage
  commentRequest(itemid.value, token, content, coverImage).then((r) => {
    console.log(r.data)
    showToast(r.data.msg)
    comment.value = ""
    talkFn()
  })
}
// 加入购物车按钮 事件

function cartAdd() {
  let token = localStorage.getItem("user-token")

  if (!token) {
    showConfirmDialog({
      title: "消息提示",
      message: "当前没有登录，是否需要登录",
    })
      .then(() => {
        router.push("/login")
      })
      .catch(() => {})
  } else {
    let product = itemid.value
    let amount = 1
    let price = productObj.value.price

    addlist(product, amount, price, token)
      .then(() => {
        showSuccessToast("已加入购物车")
        loadCartList() // **✅ 确保购物车数据同步**
      })
      .catch(() => {})
  }
}
</script>
<style lang="css" scoped>
.tu1 {
  width: 375px;
}

ul {
  background-color: bisque;
}
.tu1 >>> img {
  width: 100vw;
  height: auto;
  display: block;
}
#talk {
  width: 100vw;
  overflow: auto;
}
#talk h4 {
  margin-left: 20px;
}
#talk li {
  margin-left: 20px;
  margin-top: 10px;
}
.van-ellipsis {
  margin-top: 4px;
}
.pl {
  margin-top: 20px;
}
</style>
